<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>情人节快乐</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(45deg, #ff0076, #ff6b6b);
            font-family: 'Microsoft YaHei', sans-serif;
            overflow: hidden;
        }

        .container {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        h1 {
            color: #fff;
            font-size: 4em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: float 3s ease-in-out infinite;
        }

        .hearts {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .heart {
            position: absolute;
            color: #ff69b4;
            font-size: 24px;
            animation: fall 10s linear infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        @keyframes fall {
            from {
                transform: translateY(-100%) rotate(0deg);
                opacity: 1;
            }
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="hearts" id="hearts"></div>
    <div class="container">
        <h1>祝 <span style="color: #ffd700;">XXX</span> 情人节快乐！</h1>
        <h2 style="color: #fff;">❤️ 你是我生命中最美的相遇 ❤️</h2>
    </div>

    <script>
        function createHeart() {
            const heart = document.createElement('div');
            heart.innerHTML = '❤';
            heart.classList.add('heart');
            heart.style.left = Math.random() * 100 + '%';
            heart.style.animationDuration = Math.random() * 3 + 5 + 's';
            document.getElementById('hearts').appendChild(heart);

            setTimeout(() => {
                heart.remove();
            }, 10000);
        }

        setInterval(createHeart, 300);
    </script>
</body>
</html>